<template>
  <div>
    <el-row justify="center">
      <h1>采购入库</h1>
    </el-row>
    <el-row>
      <el-col :span="22">
        <div style="display: flex ;justify-content: space-around">
          <el-form-item label="供应商" style="width: 250px">
            <el-select v-model="this.vendorId" style="width: 230px" placeholder="请选择">
              <el-option
                  v-for="item in this.vendorList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="采购人 " style="width: 100px">
            {{ this.loginUser.name }}
          </el-form-item>
        </div>
        <el-form-item label="采购物品" style="width:120px">
        </el-form-item>
        <el-table :data="buyCartList" stripe style="margin-bottom: 20px">
          <el-table-column prop="product.name" label="商品名称"></el-table-column>
          <el-table-column prop="product.brand" label="品牌"></el-table-column>
          <el-table-column label="采购价">
            <template #default="scope">
              <el-input-number v-model="scope.row.price" @blur="update(scope.row)" ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="采购数量">
            <template #default="scope">
              <el-input-number :min="1" v-model="scope.row.num" @blur="update(scope.row)"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="移除商品">
            <template #default="scope">
              <el-button type="danger" @click="del(scope.row.id)" @blur="update(scope.row)">移除商品</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" @click="this.dialogVisible=true">添加商品</el-button>
        <el-button type="primary" @click="inku()">入库</el-button>

      </el-col>

    </el-row>
    <!--点击添加商品弹出-->
    <el-dialog v-model="dialogVisible" title="添加采购商品" width="50%" @close="clean" center>
      <el-form :model="productObj" ref="productForm" :rules="rules">
        <el-row justify="space-around">
          <el-col :span="10">
            <el-form-item label="商品编号" prop="id">
              <el-input v-model="productObj.id" @blur="checkProduct" clearable></el-input>
            </el-form-item>
            <el-form-item label="商品名称" prop="name">
              <el-input v-model="productObj.name" :readonly=this.readonly clearable></el-input>
            </el-form-item>
            <el-form-item label="品牌" prop="brand">
              <el-input v-model="productObj.brand" :readonly=this.readonly clearable></el-input>
            </el-form-item>
            <el-form-item label="类别" prop="type" >
              <el-select v-model="productObj.type" placeholder="请选择类别" :disabled="this.readonly">
                <el-option label="电脑产品" value="电脑产品"></el-option>
                <el-option label="安防产品" value="安防产品"></el-option>
                <el-option label="办公耗材" value="办公耗材"></el-option>
                <el-option label="打印扫描设备" value="打印扫描设备"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="采购数量">
              <el-input-number :min="1" v-model="num" ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <img src="" id="faceImg" width="200" height="200"><br>
            头像：<input type="file" name="face" id="imgFile" @change="fileChange()" :disabled="this.readonly" ref="photo">
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
       <el-button type="primary" @click="addProduct">添加</el-button>
      </span>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      fileList: [],
      loginUser: {},
      num: "",//采购数量
      readonly: false,
      productObj: {},
      productForm: {},
      productImg: "",
      buyCartList: [],
      vendorList: [],
      imgSrc: '',
      vendorId: "",
      file: {},
      isAdd: "",

      buyCar: {product: {}},
      dialogVisible: false,
      //校验规则
      rules: {
        id: [{required: true, message: '请输入商品编号', trigger: 'blur'}],
        name: [{required: true, message: '请输入商品名称', trigger: 'blur'}],
        brand: [{required: true, message: '请输入品牌', trigger: 'blur'}],
      }
    }
  },
  methods: {
    clean(){
      this.$refs.productForm.resetFields();
      document.getElementById("faceImg").src="";
      this.$refs.photo.value='';
    },
    findByUserId() {
      axios.get("/project/buyCar/findByUserId", {params: {userId: this.loginUser.id}}).then(resp => {
        this.buyCartList = resp.data;

      })
    },
    del(buyCarId) {
      axios.get("/project/buyCar/del", {params: {id: buyCarId}}).then(resp => {
        if (resp.data == "ok") {
          this.findByUserId()
        }
      })
    },
    update(updateObj) {
        let updateParam = {id: updateObj.id, price: updateObj.price, num: updateObj.num}
        axios.get("/project/buyCar/update", {params: updateParam}).then(resp => {
          if (resp.data == "ok") {
            this.findByUserId();
          }
        })
    },
    // 检查欲添加的商品是否在采购车中存在
    checkProduct() {
      axios.get("/project/product/findById", {params: {id: this.productObj.id}}).then(resp => {
        if (resp.data != '') {
          this.productObj = resp.data
          this.readonly = true
          document.getElementById("faceImg").src = "/project/productImg/" + this.productObj.imgPath
          this.findByUserId()
        } else {
          this.isAdd = "isAdd"
          this.readonly=false
          this.findByUserId()
        }
      })
    },
    addProduct() {
      this.$refs.productForm.validate((valid) => {
        if (valid) {
          let paramObj = new FormData;
          paramObj.append("id", this.productObj.id)
          paramObj.append("name", this.productObj.name)
          paramObj.append("type", this.productObj.type)
          paramObj.append("brand", this.productObj.brand)
          paramObj.append("face", document.getElementById("imgFile").files[0]);
          paramObj.append("num", this.num);
          let config = {
            headers: {'Content-Type': 'multipart/form-data'}
          }
          axios.post("/project/product/add", paramObj, config).then(response => {
            if (response.data == 'ok') {
              this.findByUserId();
              this.clean();
              this.dialogVisible = false;
            }
          })
        }
      });
    },

    fileChange() {
      let reader = new FileReader();//定义文件读取流对象
      reader.readAsDataURL(document.getElementById("imgFile").files[0]);
      reader.onload = function (ev) {
        document.getElementById("faceImg").src = ev.target.result;
      }
    },
    inku() {
      axios.get("/project/product/inKu", {
        params: {
          vendorId:this.vendorId
        }
      }).then(resp => {
        if (resp.data == "ok") {
          this.findByUserId()
        }
      })
    },
    findAll() {
      axios.get("/project/vendor/findAll").then(resp => {
        this.vendorList = resp.data;
        this.vendorId=this.vendorList[0].id;
      })
    }

  },
  created() {
    this.findAll()
    this.loginUser = JSON.parse(sessionStorage.getItem("loginUser"))
    this.findByUserId()
  }
}
</script>

<style scoped>

</style>